<%@page contentType="text/html; charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>群组聊天</title>
    <link rel="icon" href="<c:url value="../resources/image/favicon.ico"/> " type="image/x-icon">
    <style>
        body {
            font-family: 'Arial', sans-serif;
        }

        .search-container {
            max-width: 1000px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        td {
            padding: 8px;
            text-align: center;
            border-bottom: 1px solid #ddd;
            width: auto;
        }

        th {
            background-color: #f2f2f2;
            padding: 8px;
            text-align: center;
            border-bottom: 1px solid #ddd;
            width: auto;
        }

        /* 样式可以根据需求进行修改 */
        nav {
            background-color: #f2f2f2;
            padding: 10px 0;
            text-align: center;
        }

        nav a {
            padding: 14px 20px;
            text-decoration: none;
            color: black;
            display: inline-block;
            cursor: pointer; /* 添加鼠标指针样式，让链接看起来可点击 */
        }

        nav a:hover {
            background-color: #ddd;
        }

        .search-bar {
            text-align: center;
            margin-top: 20px;
        }

        input[type="text"] {
            padding: 10px;
            width: 600px;
        }

        input[type="submit"] {
            padding: 10px 20px;
        }

        .dropdown {
            position: relative;
            display: inline-block;
        }

        .dropbtn {
            padding: 14px 20px;
            text-decoration: none;
            color: black;
            cursor: pointer; /* 添加鼠标指针样式，让链接看起来可点击 */
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f9f9f9;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            z-index: 1;
        }

        .dropdown:hover .dropdown-content {
            display: block;
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
            cursor: pointer; /* 添加鼠标指针样式，让链接看起来可点击 */
        }

        .dropdown-content a:hover {
            background-color: #f1f1f1;
        }

        /* 确保整体布局为flex，以便group-list和chat-window并排显示 */
        .container {
            display: flex;
            height: 105vh; /* 使容器垂直占满整个视口高度 */
        }

        .group-list {
            width: 15%; /* 群组列表占据20%的宽度 */
            background-color: #e8e8e8; /* 米白色背景 */
            overflow-y: auto; /* 如果内容超出高度，允许垂直滚动 */
            padding: 10px; /* 添加内部间距 */
            box-sizing: border-box; /* 确保padding不会影响总宽度 */
        }

        .group-list h3 {
            margin-top: 0;
            text-align: center; /* 标题居中 */
        }

        .group-list ul {
            list-style: none; /* 移除列表项的默认样式 */
            padding: 0; /* 移除默认内边距 */
            margin: 0; /* 移除默认外边距 */
            font-size: 20px;
        }

        .group-list li {
            padding: 15px 15px; /* 添加列表项的内边距 */
            cursor: pointer; /* 鼠标悬停时显示指针 */
            border-top: 2px solid #b4b4b4; /* 列表项之间的分隔线 */
        }

        .group-list li:hover {
            background-color: #eaeaea; /* 鼠标悬停时的背景色 */
        }

        /*!* 聊天窗口的样式 *!*/
        /*.chat-window {*/
        /*    width: 80%; !* 聊天窗口占据剩余的80%宽度 *!*/
        /*    !* 可以根据需要添加更多样式 *!*/
        /*}*/

    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        let myGroupId = 1;

        function getCookie(cookieName) {
            const strCookie = document.cookie
            const cookieList = strCookie.split(';')

            for (let i = 0; i < cookieList.length; i++) {
                const arr = cookieList[i].split('=')
                if (cookieName === arr[0].trim()) {
                    return arr[1]
                }
            }

            return ''
        }


        document.addEventListener('DOMContentLoaded', function () {
            // 群组点击事件
            document.getElementById('groupLink').addEventListener('click', function (event) {
                if (!checkUserLoggedIn()) {
                    alert('您尚未登录，请先登录');
                    window.location.href = '/page/toLoginPage'; // 模拟跳转到登录页面
                    event.preventDefault();
                }
            });

            // 个人资料点击事件
            document.getElementById('profileLink').addEventListener('click', function (event) {
                if (!checkUserLoggedIn()) {
                    alert('您尚未登录，请先登录');
                    window.location.href = '/page/toLoginPage'; // 模拟跳转到登录页面
                    event.preventDefault();
                }
            });

            // 个人资料点击事件
            document.getElementById('chatLink').addEventListener('click', function (event) {
                if (!checkUserLoggedIn()) {
                    alert('您尚未登录，请先登录');
                    window.location.href = '/page/toLoginPage'; // 模拟跳转到登录页面
                    event.preventDefault();
                }
            });

            // 个人资料点击事件
            document.getElementById('notificationLink').addEventListener('click', function (event) {
                if (!checkUserLoggedIn()) {
                    alert('您尚未登录，请先登录');
                    window.location.href = '/page/toLoginPage'; // 模拟跳转到登录页面
                    event.preventDefault();
                }
            });

            // 校验用户是否已登录的函数
            function checkUserLoggedIn() {
                // 这里可以编写校验cookie中用户是否登录的逻辑，返回 true 或 false
                // 假设这里使用一个名为 isUserLoggedIn 的函数来校验
                return isUserLoggedIn();
            }

            // 这里是模拟的校验用户是否已登录的函数
            function isUserLoggedIn() {
                // 假设在 cookie 中有一个名为 'loggedIn' 的标识，表示用户是否已登录
                const username = getCookie('username')
                // alert(username)
                // 返回 true 表示已登录，返回 false 表示未登录
                return username !== '';

            }
        });

        $.ajax({
            url: "/groups/getGroup",
            type: "get",
            data: {
                username: "${username}"
            },
            success: function (response) {
                var groupList = $("#groupList");
                if (response != "") {
                    for (var i = 0; i < response.length; i++) {
                        var mygroup = response[i];
                        var listItem = $("<li></li>")
                            .addClass("group-item")
                            .text("群组名："+mygroup.groupname)
                            .attr("data-group-id", mygroup.groupid);
                        var username = "${username}";
                        groupList.append(listItem);
                        console.log(mygroup.groupid);
                    }
                }
            },
            error: function (xhr, status, error) {
            }
        });

        $(document).on('click', '.group-item', function () {
            var groupId = $(this).attr('data-group-id');
            myGroupId = groupId;
            loadChatHistory(groupId);
        });

        function loadChatHistory(groupId) {
            // 使用 AJAX 请求加载该 groupId 的聊天记录
            $.ajax({
                url: '/chat/history/' + groupId, // 替换为您的后端 API 路径
                type: 'GET',
                success: function (messages) {
                    // 清除当前聊天记录
                    $('#historyMsg').empty();
                    console.log(messages);
                    // 显示新的聊天记录
                    messages.forEach(function (message) {
                        // 根据您的消息格式调整这里的显示逻辑
                        // 创建一个新的 span 元素并设置其内容和类
                        var messageR = $('<p></p>');
                        var timeSpan = $('<span>').addClass('timespan').text(formatDate(message.createTime));
                        // 创建一个新的消息内容字符串
                        var messageContent = '[' + message.userName + '] : ' + message.content;
                        messageR
                            .append(timeSpan) // 添加时间戳
                            .append('<br/>') // 添加换行
                            .append(document.createTextNode(messageContent)); // 添加文本消息
                        // 将这些元素添加到 msgToDisplay 元素中
                        $('#historyMsg') // 清空原有内容
                            .append(messageR);
                    });
                },
                error: function (error) {
                    console.error("Error loading chat history: ", error);
                }
            });
        }

        function sendMessage() {
            var content = $("#messageInput").val();
            if (content.trim().length != 0) {
                $("#messageInput").val('');
                stompClient.send("/app/chat/message", {}, JSON.stringify({
                    'userName': $("#myName").val(),
                    'content': content,
                    'groupId': myGroupId
                }));
            }
        }
    </script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<nav>
    <a href="/">首页</a>
    <div class="dropdown">
        <a class="dropbtn">群组</a>
        <div class="dropdown-content">
            <a href="/page/toGroupPage" id="groupLink">群组管理</a>
            <a href="/page/toChatRoomPage" id="chatLink">群组聊天</a>
        </div>
    </div>
    <a href="/page/toAnswerPage">智能问答</a>
    <div class="dropdown">
        <a class="dropbtn">个人中心</a>
        <div class="dropdown-content">
            <a href="/page/toUserCenterPage" id="profileLink">个人资料</a>
            <a href="/page/toNotificationPage" id="notificationLink">通知</a>
            <a href="/page/Exit">登出</a>
        </div>
    </div>
</nav>
<div class="container">
    <div class="group-list">
        <h3 style="margin-top: 10px;">我的群组</h3>
        <ul id="groupList">
            <!-- 群组列表在这里动态加载 -->
        </ul>
    </div>
    <div class="wrapper">
        <div class="banner">
            <h1>群组聊天室</h1>
            <%--        <div id="activeUserWraper">--%>
            <%--            <span class="label label-info" id="status"></span><span class="label">位用户当前在线</span>--%>
            <%--        </div>--%>
        </div>
        <div id="historyMsg">
        </div>
        <div class="controls">
            <div class="items">
                <%--            <input id="uploadUrl" type="hidden" value="<c:url value="/upload/image"/> ">--%>
                <input id="websocketUrl" type="hidden" value="<c:url value="/websocket"/> ">
                <%--            <input id="emojiBaseUri" type="hidden" value="<c:url value="/resources/media/emoji/"/> ">--%>
<%--                <form id="sendImageForm" enctype="multipart/form-data" method="post">--%>
                    <%--                <input id="emoji" class="btn btn-primary" type="button" value="emoji" title="emoji"/>--%>
                    <%--                <label for="sendImage" class="imageLable">--%>
                    <%--                    <input id="sendImageBtn" class="btn btn-success" type="button" value="发送图片"/>--%>
                    <%--                    <input id="sendImage" type="file" value="发送图片" name="image"--%>
                    <%--                           accept="image/jpg,image/jpeg,image/png,image/gif"/>--%>
                    <%--                </label>--%>
                    <input id="clearBtn" class="btnMe" type="button" value="清屏" title="清除屏幕消息"/>
                    <input id="myName" type="hidden" name="userName" value="${username}"/>
                </form>
            </div>
            <textarea class="textarea" id="messageInput" placeHolder="按下[Enter]发送消息"></textarea>
            <div id="emojiWrapper">
            </div>
        </div>
    </div>
</div>


<!--jquery cdn-->
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<!--sockJS cdn-->
<script src="https://cdn.jsdelivr.net/sockjs/1/sockjs.min.js"></script>
<!--stomp cdn-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/stomp.js/2.3.3/stomp.min.js"></script>

<!-- Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- chatroom css样式文件 -->
<link rel="stylesheet" href="<c:url value="../resources/css/main.css?v=20172102086"/> ">
<!-- Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/b0ootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
<!-- chatroom js 文件-->
<script src="<c:url value="../resources/js/chatroom.js"/> "></script>

</body>
</html>